import { useEffect, useState } from "react"
import { useSearchParams } from "react-router"
import type { Issue } from "../types/issue"
import { reqGetIssueByPage } from "../api/issue"
import { Title } from "../components/Title"
import { IssueCard } from "../components/IssueCard"
import { Empty, Pagination } from "antd"


export const Search = () => {
    const [searchParams] = useSearchParams()
    const type = searchParams.get("type")
    const [list, setList] = useState<Issue[]>([])
    const value = searchParams.get("value")
    const [nowP, setNowP] = useState(1)
    const [total, setTotal] = useState(0)
    const getList = async () => {
        if (type === "issue") {
            const {
                data: { list, total },
            } = await reqGetIssueByPage({
                page: nowP,
                size: 5,
                searchValue: value!,
            })
            setTotal(total)
            setList(list)
        }
    }
    useEffect(() => {
        setNowP(1)
        getList()

    }, [value, type])
    useEffect(() => {
        getList()
    }, [nowP])
    if (type === "issue") {
        return (
            <>
                <Title title="搜索结果"></Title>
                {list.length > 0 ? (
                    <>
                    { list.map((item) => (<IssueCard {...item} key={item._id}></IssueCard>))}
                    <Pagination align="center"
                    current={nowP}
                    total={total}
                    pageSize={5}
                    onChange={(e)=>setNowP(e)}>
                    </Pagination>
                    </>
                ) : (
                    <Empty description={"暂无搜索结果"}></Empty>
                )}
            </>
        )
    }else{
        <>
        <Title title="搜索结果"></Title>
        </>
    }
}


















